import React, { useState } from 'react'


// React.memo 是一个高阶组件，是用来解决无关组件被重新调用的问题
// 它可以帮我们缓存组件，当组件没有改变时不做任何处理
// const Child = React.memo(()=>{

//   console.log('Child 被执行了');

//   return (<div>
//     Child
//   </div>)
// })

let Child = ()=>{
  console.log('Child 被执行了');
  return (<div>
    Child
  </div>)
}

Child = React.memo(Child)

const App = () => {

    const [count,setCount] = useState(100)

    return (
      <div >

        <h1>{count}</h1>
        <button onClick={()=>{
          setCount(count + 1)
        }}> 点击加 1 </button>
        <hr />

        
        <Child />
      </div>
  )
}
export default App